<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="root">
    <div class="bg"></div>
    <div class="login">
      <div class="frame">

        <h1>我的项目名称</h1>
        <div><i class="icon-phone icon"></i><input placeholder="输入手机号码"></div>
        <div class="pwd">
          <i class="icon-pwd icon"></i>
          <input type="password" placeholder="输入登录密码">
          <i class="icon-eye icon" style="cursor: pointer;"
            onclick="this.classList.toggle('icon-eye-close');this.previousElementSibling.type=this.previousElementSibling.type=='password'?'text':'password';"></i>
        </div>
        <div class="pwd">
          <i class="icon-pwd icon"></i>
          <input type="password" placeholder="再次输入登录密码">
          <i class="icon-eye icon" style="cursor: pointer;"
            onclick="this.classList.toggle('icon-eye-close');this.previousElementSibling.type=this.previousElementSibling.type=='password'?'text':'password';"></i>
        </div>
        <div><i class="icon-user icon"></i><input placeholder="输入姓名"></div>
        <div class="btn">新账号注册</div>
        <a href="login.html">我要登录</a>
      </div>
    </div>
  </div>
  <style>
    .root {
      --login-1: hsl(210, 99%, 32%);
      --login-2: hsl(210, 99%, 62%);
      --login-3: hsl(210, 99%, 72%);
    }

    .login {
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }

    .bg {
      position: fixed;
      width: 100vw;
      height: 100vh;
      top: 0;
      left: 0;
      z-index: 0;
      background-image: linear-gradient(to top,
          var(--login-1) 0,
          var(--login-3) 30%,
          var(--login-2) 50%,
          var(--login-1) 100%);
    }

    .bg::before,
    .bg::after {
      content: "";
      position: absolute;
      top: -50vmax;
      left: 50vmax;
      width: 100vmax;
      height: 100vmax;
      background-color: rgba(0, 0, 0, 0.05);
      animation: bg-move 57s infinite reverse;
      border-radius: 100%;
    }

    .bg::after {
      background-color: rgba(255, 255, 255, 0.05);
      top: 10vmax;
      left: -50vmax;
      animation-duration: 61s;
      animation-direction: alternate-reverse;
    }

    @keyframes bg-move {
      0% {
        transform: translate(0, 0);
      }

      25% {
        transform: translate(10vmax, 0);
      }

      50% {
        transform: translate(10vmax, 10vmax);
      }

      75% {
        transform: translate(-10vmax, 10vmax);
      }

      100% {
        transform: translate(-10vmax, -10vmax);
      }
    }

    .login h1 {
      text-align: center;
      font-size: 3rem;
      font-family: "黑体";
      font-weight: 900;
      background-image: linear-gradient(70deg,
          var(--login-1) 10px,
          var(--login-3) 20px,
          var(--login-3) 35px,
          var(--login-1) 45px);

      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-size: 200% 100%;
      background-position: 20% 0;
      animation: title-bg 5s infinite reverse;
    }

    @keyframes title-bg {
      10% {
        background-position: -60% 0;
      }

      19% {
        background-position: -40% 0;
      }

      25% {
        background-position: -80% 0;
      }

      70% {
        background-position: -20% 0;
      }
    }

    .frame {
      /* display: grid; */
      padding: 1rem 3rem 2rem;
      /* grid-template-columns: 5rem; */
      width: 25rem;
      /* background-color: #000; */
      margin-bottom: 15vh;
      box-sizing: border-box;
      position: relative;

    }

    .frame::before {
      left: 0;
      top: 0;
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, .4);
      filter: blur(10px);
      z-index: -1;
    }

    .icon::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .icon-phone::before {
      background-image: url('data:image/svg+xml;charset=utf-8,<svg t="1666764137419" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3510" width="64" height="64"><path fill="hsl(210, 99%, 32%)" d="M877.1 238.7L770.6 132.3c-13-13-30.4-20.3-48.8-20.3s-35.8 7.2-48.8 20.3L558.3 246.8c-13 13-20.3 30.5-20.3 48.9 0 18.5 7.2 35.8 20.3 48.9l89.6 89.7c-20.6 47.8-49.6 90.6-86.4 127.3-36.7 36.9-79.6 66-127.2 86.6l-89.6-89.7c-13-13-30.4-20.3-48.8-20.3-18.5 0-35.8 7.2-48.8 20.3L132.3 673c-13 13-20.3 30.5-20.3 48.9 0 18.5 7.2 35.8 20.3 48.9l106.4 106.4c22.2 22.2 52.8 34.9 84.2 34.9 6.5 0 12.8-0.5 19.2-1.6 132.4-21.8 263.8-92.3 369.9-198.3C818 606 888.4 474.6 910.4 342.1c6.3-37.6-6.3-76.3-33.3-103.4z m-37.6 91.5c-19.5 117.9-82.9 235.5-178.4 331s-213 158.9-330.9 178.4c-14.8 2.5-30-2.5-40.8-13.2L184.9 721.9 295.7 611l119.8 120 0.9 0.9 21.6-8C570.7 675 674.9 570.8 723.7 438.1l8-21.6-120.8-120.7 110.8-110.9 104.5 104.5c10.8 10.8 15.8 26 13.3 40.8z" p-id="3511"></path></svg>');
    }

    .icon-pwd::before {
      background-image: url('data:image/svg+xml;charset=utf-8,<svg t="1666764924843" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2240" width="64" height="64"><path fill="hsl(210, 99%, 32%)" d="M805.596 983.98H214.648C153.09 983.98 110 928.58 110 867.024V571.548c0-67.712 43.09-123.114 104.648-123.114v-86.18C214.648 183.738 343.918 36 510.12 36c166.204 0 295.474 147.738 295.474 326.254 0 18.466-12.31 30.778-24.622 30.778s-24.622-12.312-24.622-30.78c0-147.736-110.804-264.694-240.074-264.694-135.426 0-240.074 116.958-240.074 264.696v86.18H811.75c61.558 0 104.648 55.4 104.648 116.96v295.474c-6.156 73.868-49.246 123.114-110.804 123.114zM861 571.55c0-30.78-24.622-61.558-55.4-61.558H214.646c-30.78 0-55.402 24.624-55.402 61.56V867.02c0 30.78 24.622 61.56 55.4 61.56h590.95c30.78 0 55.402-24.624 55.402-61.56V571.548zM534.748 743.91v92.336c0 18.468-12.312 30.78-24.624 30.78s-24.622-12.312-24.622-30.78V743.91c-30.78-12.312-55.402-43.09-55.402-80.024 0-55.4 36.934-92.336 80.024-92.336s80.024 36.934 80.024 86.18c0 36.934-24.622 73.868-55.4 86.18z m-24.624-116.96c-12.312 0-24.622 12.314-24.622 30.78 0 18.468 12.31 30.78 24.622 30.78s24.624-12.312 24.624-30.78c0-18.466-12.312-30.78-24.624-30.78z" p-id="2241"></path></svg>');
    }

    .icon-eye::before {
      background-image: url('data:image/svg+xml;charset=utf-8,<svg t="1666765010217" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3180" width="64" height="64"><path fill="hsl(210, 99%, 32%)" d="M511.978667 149.312c85.717333 0 164.202667 32.384 224.810666 86.058667l7.616 6.848c43.413333 39.552 111.936 110.229333 205.525334 212.053333a85.333333 85.333333 0 0 1 3.136 111.893333l-3.093334 3.562667-33.770666 36.586667c-82.133333 88.533333-142.229333 149.546667-180.352 183.061333-60.48 53.205333-138.581333 85.269333-223.872 85.269333-85.802667 0-164.352-32.448-224.981334-86.229333l-7.594666-6.826667c-43.370667-39.552-111.808-110.165333-205.333334-211.84a85.333333 85.333333 0 0 1-3.093333-111.978666l3.114667-3.562667 41.706666-45.098667c77.610667-83.328 134.677333-141.162667 171.157334-173.546666C347.584 181.76 426.154667 149.312 512 149.312z m0 64c-67.712 0-131.712 25.024-182.549334 70.122667l-7.253333 6.528c-37.674667 34.389333-96.725333 94.933333-176.384 180.906666l-24.597333 26.666667a21.333333 21.333333 0 0 0 0 28.885333L153.6 561.493333c80.938667 87.168 139.818667 147.072 175.850667 179.029334 50.837333 45.077333 114.794667 70.101333 182.506666 70.101333 67.285333 0 130.901333-24.725333 181.610667-69.333333l7.296-6.506667c37.952-34.389333 97.28-95.146667 177.237333-181.546667l24.704-26.816a21.333333 21.333333 0 0 0 0-28.864l-40.234666-43.498666c-77.013333-82.730667-133.333333-139.882667-168.256-170.794667-50.816-45.013333-114.730667-69.973333-182.357334-69.973333zM512 320a192 192 0 1 1 0 384 192 192 0 0 1 0-384z m0 64a128 128 0 1 0 0 256 128 128 0 0 0 0-256z m0 42.666667a85.333333 85.333333 0 1 1-85.226667 89.6L426.666667 512h64a21.333333 21.333333 0 0 0 21.184-18.837333L512 490.666667v-64z" p-id="3181"></path></svg>');
    }

    .icon-eye-close::before {
      background-image: url('data:image/svg+xml;charset=utf-8,<svg t="1666765070572" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3657" width="64" height="64"><path fill="hsl(210, 99%, 32%)" d="M246.4 258.304l-83.84-83.84 46.464-46.4L309.12 228.288A543.04 543.04 0 0 1 512 190.72c211.968 0 382.592 107.136 512 321.28-58.688 98.56-126.464 174.464-203.456 227.648l109.888 109.888-46.4 46.4-121.408-121.408a517.504 517.504 0 0 1-1.088 0.576l-68.224-68.224 1.216-0.512-117.312-117.312-0.896 0.832L435.2 448.832l0.768-0.96L313.6 325.376a435.968 435.968 0 0 0-1.152 0.576L245.376 258.944l1.088-0.64z m509.248 416.448c60.8-37.76 115.456-91.712 164.48-162.432-108.736-155.136-242.88-229.76-408.128-229.76-46.08 0-89.728 5.76-131.072 17.472l112.32 112.32c6.144-1.28 12.48-1.92 19.008-1.92 54.272 0 98.368 45.696 98.368 102.016 0 5.44-0.448 10.816-1.28 16l146.304 146.304z m-566.4-379.2L253.44 359.808c-54.592 37.12-104.32 87.808-149.632 152.512 107.2 154.688 241.28 229.12 408.128 229.12 38.72 0 75.712-3.968 111.04-12.096l73.6 73.6A553.984 553.984 0 0 1 512 833.28c-213.888 0-384.512-107.136-512-321.28 55.488-91.84 118.592-163.968 189.248-216.448zM508.032 614.4L414.144 520.448c3.84 51.2 44.096 91.776 93.888 93.952z" p-id="3658"></path></svg>');
    }

    .icon-user::before {
      background-image: url('data:image/svg+xml;charset=utf-8,<svg t="1666768116016" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4780" width="64" height="64"><path fill="hsl(210, 99%, 32%)" d="M772.016477 696.022177c-39.228443-39.229466-85.763292-68.49807-136.530536-86.546122 26.774807-13.283538 51.500954-30.976502 73.254398-52.729945 52.55189-52.550867 81.494059-122.422214 81.494059-196.74085s-28.941146-144.189983-81.494059-196.741873c-52.550867-52.550867-122.422214-81.493036-196.74085-81.493036s-144.189983 28.942169-196.741873 81.493036c-52.55189 52.550867-81.494059 122.422214-81.494059 196.741873s28.941146 144.189983 81.494059 196.74085c21.753443 21.753443 46.480614 39.446407 73.256444 52.729945-50.76929 18.049075-97.303116 47.316655-136.532583 86.546122-66.188468 66.187445-104.009865 153.166425-107.422591 246.208495l48.730864 0c3.387144-80.028685 36.140105-154.783249 93.129051-211.770148 55.771211-55.771211 128.557958-88.326675 206.650547-92.867084 6.27389 0.418532 12.582573 0.645706 18.929118 0.645706 6.345522 0 12.656251-0.227174 18.929118-0.645706 78.091566 4.54041 150.880359 37.095873 206.650547 92.867084 56.987922 56.986899 89.741907 131.741463 93.129051 211.770148l48.730864 0C876.027365 849.188602 838.204945 762.209622 772.016477 696.022177zM282.466792 360.004237c0-126.564557 102.96814-229.53372 229.53372-229.53372 126.564557 0 229.53372 102.969163 229.53372 229.53372 0 120.304993-93.040023 219.280192-210.942293 228.77545-6.170536-0.304945-12.369725-0.460488-18.591427-0.460488-6.222725 0-12.420891 0.155543-18.59245 0.460488C375.505791 579.284429 282.466792 480.30923 282.466792 360.004237z" p-id="4781"></path></svg>');
    }

    .frame input {
      border: none;
      background-color: rgba(0, 0, 0, 0);
      outline: none;
      font-size: 1.5rem;
      padding: .25rem;
      color: var(--login-1);
      width: 100%;
    }

    .frame input::-webkit-input-placeholder {
      color: var(--login-1);
    }

    .frame>div {
      border: solid 2px var(--login-1);
      width: 100%;
      box-sizing: border-box;
      padding: .5rem;
      display: grid;
      grid-template-columns: 2rem 1fr;
      margin-bottom: 1rem;
    }

    .frame>div:has(:focus) {
      box-shadow: 0 0 1rem var(--login-1);
    }

    .frame>div.pwd {
      grid-template-columns: 2rem 1fr 2rem;
    }

    .frame>div.btn {
      text-align: center;
      font-size: 1.5rem;
      display: block;
      color: #eee;
      background-color: var(--login-1);
      user-select: none;
      letter-spacing: .5rem;
      padding: .7rem;
    }

    .frame {
      text-align: center;
    }

    .frame a {
      color: var(--login-1);
      font-size: 1.2rem;
    }

    .frame a:hover {
      color: #d00;
    }
  </style>
</body>

</html>